<template>
  <a-modal
      :title="title"
      :width="800"
      :visible="visible"
      :confirmLoading="confirmLoading"
      @ok="handleOk"
      @cancel="handleCancel"
      cancelText="关闭"
      class="operationModal"
  >
    <a-spin :spinning="confirmLoading">
      <a-form
          :form="form"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
      >
        <a-form-item label="车牌号">
          <a-input
              placeholder="请输入车牌号"
              v-decorator="['plateNo', { rules: [{ type: 'string', required: true, message: '请输入车牌号!' }] }]"
          />
        </a-form-item>
        <a-form-item label="有效期">
          <a-radio-group
              v-model="isForever"
              @change="isForeverChange"
          >
            <a-radio :value="1">永久期限</a-radio>
            <a-radio :value="0">自定义时间</a-radio>
          </a-radio-group>
        </a-form-item>
        <div v-show="!isForever">
          <a-form-item
              label="指定有效期"
              class="dateBox"
          >
            <a-checkbox
                @change="isDateChecked = !isDateChecked"
                :checked="isDateChecked"
            ></a-checkbox>
            <a-button
                :disabled="!isDateChecked"
                v-for="(item,index) in fastDate"
                :key="item"
                @click="fastDateClick(index)"
            >{{ item }}
            </a-button>
          </a-form-item>
          <a-row>
            <a-col
                :xs="{ offset: 24 }"
                :sm="{ offset: 5 }"
            >
              <a-row>
                <a-col :span="12">
                  <a-form-item label="开始时间">
                    <a-date-picker
                        show-time
                        format="YYYY-MM-DD HH:mm:ss"
                        :disabled="!isDateChecked"
                        v-model="startTime"
                    />
                  </a-form-item>
                </a-col>
                <a-col :span="12">
                  <a-form-item label="结束时间">
                    <a-date-picker
                        show-time
                        format="YYYY-MM-DD HH:mm:ss"
                        :disabled="!isDateChecked"
                        v-model="endTime"
                    />
                  </a-form-item>
                </a-col>
              </a-row>
            </a-col>
          </a-row>
        </div>

        <a-form-item label="车主/姓名">
          <a-input
              placeholder="请输入车主/姓名"
              v-decorator="[
              'userName',
              {
                rules: [
                  { max: 40, message: '车主/姓名长度不要超过40个字符' },
                ],
              },
            ]"
          />
        </a-form-item>
        <a-form-item label="车主手机号码">
          <a-input
              placeholder="请输入车主手机号码"
              v-decorator="[
              'mobile',
              { rules: [{ validator: this.validateMobile }] },
            ]"
          />
        </a-form-item>

        <a-form-item label="家庭住址">
          <a-input
              placeholder="请输入家庭住址"
              v-decorator="['address', { rules: [{ max: 100, message: '家庭住址长度不要超过100个字符' }] }]"
          />
        </a-form-item>

        <a-form-item label="车辆备注">
          <a-input
              placeholder="请输入车辆备注"
              v-decorator="['remark', { rules: [{ max: 100, message: '车辆备注长度不要超过100个字符' }] }]"
          />
        </a-form-item>
      </a-form>
    </a-spin>
  </a-modal>
</template>

<script>
import {httpAction} from '@api/manage'
import pick from 'lodash.pick'
import moment from 'moment'

export default {
  name: 'ParkInnerListModal',
  data() {
    return {
      isForever: 0,
      title: '操作',
      visible: false,
      model: {},
      labelCol: {
        xs: {span: 24},
        sm: {span: 5},
      },
      wrapperCol: {
        xs: {span: 24},
        sm: {span: 19},
      },
      confirmLoading: false,
      form: this.$form.createForm(this),
      url: {
        add: '/innerList/parkInnerList/add',
        edit: '/innerList/parkInnerList/edit',
      },
      isDateChecked: false, //标记是否勾选了指定日期
      startTime: '', //开始日期
      endTime: '', //结束日期
      fastDate: ['一个月', '三个月', '六个月', '一年', '三年'],
    }
  },
  mounted() {
  },
  methods: {
    moment,
    isForeverChange(e) {
      this.isForever = e.target.value
    },
    add() {
      this.edit({isForever: 1, status: 'Y'})
    },
    edit(record) {
      this.isForever = record.isForever
      this.isDateChecked = false
      this.startTime = ''
      this.endTime = ''
      this.visible = true
      this.confirmLoading = true
      this.form.resetFields()

      this.model = Object.assign({}, record)
      if (!record.isForever) {
        if (record.startTime) {
          this.isDateChecked = true
          this.startTime = moment(record.startTime)
          this.endTime = moment(record.endTime)
        }
      }

      this.$nextTick(() => {
        this.form.setFieldsValue(
            pick(this.model, 'plateNo', 'userName', 'mobile', 'address', 'remark')
        )
        this.confirmLoading = false
      })
    },
    close() {
      this.$emit('close')
      this.visible = false
    },
    handleOk() {
      const that = this
      // 触发表单验证
      this.form.validateFields((err, values) => {
        if (!err) {
          let httpurl = ''
          let method = ''
          if (!this.model.id) {
            httpurl += this.url.add
            method = 'post'
          } else {
            httpurl += this.url.edit
            method = 'put'
          }
          let formData = Object.assign({}, this.model, values)
          if (this.isForever === 1) {
            delete formData.startTime
            delete formData.endTime
            formData.isForever = 1
          } else {
            formData.isForever = 0
            if (this.isDateChecked) {
              if (this.startTime) {
                formData.startTime = this.startTime.format('YYYY-MM-DD HH:mm:ss')
              } else {
                this.$message.warning('请设置有效期开始时间')
                return
              }
              if (this.endTime) {
                formData.endTime = this.endTime.format('YYYY-MM-DD HH:mm:ss')
              } else {
                this.$message.warning('请设置有效期结束时间')
                return
              }
              if (this.endTime < this.startTime) {
                this.$message.warning('有效期结束时间不能小于开始时间')
                return
              }
            } else {
              this.$message.warning('请指定有效期')
              return;
            }
          }
          this.confirmLoading = true
          httpAction(httpurl, formData, method)
              .then((res) => {
                if (res.success) {
                  that.$message.success(res.message)
                  that.$emit('ok')
                  that.close()
                } else {
                  that.$message.warning(res.message)
                }
              })
              .finally(() => {
                this.confirmLoading = false
              })
        }
      })
    },
    handleCancel() {
      this.close()
    },
    validateMobile(rule, value, callback) {
      if (!value || new RegExp(/^1([38][0-9]|4[579]|5[0-3,5-9]|6[6]|7[0135678]|9[89])\d{8}$/).test(value)) {
        callback()
      } else {
        callback('手机号码格式不正确!')
      }
    },
    fastDateClick(index) {
      console.log(index)
      let now = this.moment()
      let endTime = this.moment()
      switch (index) {
        case 0:
          endTime.add(1, 'months')
          break
        case 1:
          endTime.add(3, 'months')
          break
        case 2:
          endTime.add(6, 'months')
          break
        case 3:
          endTime.add(1, 'years')
          break
        case 4:
          endTime.add(3, 'years')
          break
      }

      this.startTime = now
      this.endTime = endTime
    },
  },
  watch: {
    isDateChecked(newValue) {
      if (!newValue) {
        this.startTime = ''
        this.endTime = ''
      }
    },
  },
}
</script>

<style lang="less" scoped>
.dateBox .ant-btn {
  margin-left: 20px;
}
</style>
